<!-- 模板 -->
<template>
  <div class="configure">
       <el-tabs v-model="listParams.type" @tab-click="handleClick">
      <el-tab-pane label="代理金额配置（元）" name="1">
        <el-form :model="form1">
            <el-form-item  label="代理金额配置:">
            <el-input v-model="form1.price"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="onSubmit1">保 存</el-button>
      </el-tab-pane>

      <el-tab-pane label="代理分成配置" name="2">
          <el-form :model="form2">
            <!-- <el-form-item  label="付费代理分成比:">
                <el-input v-model="form2.price"></el-input>
            </el-form-item> -->
            <el-form-item  label="付费代理分成比（%）:" >
                  <el-radio-group v-model="form2.price" @change='changeValue'>
                      <el-radio  
                      v-for="item in options1"
                      :key="item.id"
                      :label="item.id"
                      >{{item.price}}</el-radio>
                  </el-radio-group>
            </el-form-item>
            <el-form-item  label="修改付费代理分成比（%）:" v-if="showDiv">
                <el-input v-model="priceForm.price" style="width:150px"></el-input>
            </el-form-item>
             
        </el-form>
        <el-button type="primary" @click="onSubmit2">保 存</el-button>
        <el-button type="primary" @click="add">新 增</el-button>
        <el-form :model="form5">
          <el-form-item  label="非付费代理分成比(%):">
                <el-input v-model="form5.price"></el-input>
            </el-form-item>
        <el-button type="primary" @click="onSubmit">保 存</el-button>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="提现手续费" name="3">
        <el-form :model="form3">
            <el-form-item  label="提现手续费的比例(%):">
              <el-input v-model="form3.price" ></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="onSubmit3">保 存</el-button>
      </el-tab-pane>

      <el-tab-pane label="联系我们" name="4">
        <el-form :model="form4">
             <el-form-item label="二维码:" prop="logo">
                <el-upload
                :headers='headers'
                class="avatar-uploader"
                :action="upImage+'/table/upload'"
                :on-success="handleAvatarSuccess"
                :show-file-list="false"
                >
                <img v-if="form4.picUrl" :src="form4.picUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item  label="电话:">
                <el-input v-model="form4.phone"></el-input>
            </el-form-item>
            <el-form-item  label="地址:">
                <el-input v-model="form4.content"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="onSubmit4">保 存</el-button>
      </el-tab-pane>
    </el-tabs>
    
    <!-- 新增价格 -->
        <el-dialog title="新增" :visible.sync="cateOpen" width="550px">
      <el-form
        ref="cateForm"
        :model="cateForm"
        label-width="120px"
      >
        <el-form-item label="分成比(%)：" prop="price">
          <el-input v-model="cateForm.price" placeholder="填写1-100之间的数"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCateForm">确 定</el-button>
        <el-button @click="cateOpen =false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import component from '@/components/*.vue'
import {getPriceAdd,getPriceDsc,getPriceUpdate} from '@/api/teacher/index'
import {getMeasure,getMeasureDsc} from '@/api/teacher/index'
import { getToken } from "@/utils/auth";

export default {
  name: '',
  data () {
    return {
        headers: { Authorization: "Bearer " + getToken() },
        upImage: process.env.VUE_APP_BASE_API,
        // showUrl:'https://9001rzsxy.oss-cn-beijing.aliyuncs.com',
        // 标签页
        listParams:{
            type:'1',
        },
        showDiv:false,
        form1:{
          type:1,
          id:undefined
        },
        form2:{
          type:2,
          id:undefined,
          price:undefined
        },
        form3:{
          type:4,
          id:undefined,
          price:undefined
        },
        form4:{
            picUrl:'',
            type:6,
            id:undefined
        },
        form5:{
          type:3,
          id:undefined,
          price:undefined
        },
        cateOpen:false,
        cateForm:{
          type:2,
        },
        options1:[],
        id:undefined,
        priceForm:{
          price :undefined
        },
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    changeValue(val){
      // console.log(val);
      this.id = val
      for (let i = 0; i < this.form2.length; i++) {
        if(this.form2[i].id == this.id){
          // this.form2 = this.form2[i]
          this.priceForm = this.form2[i]
        }
      }
      this.showDiv = true
    },
    submitCateForm(){
      getPriceAdd(this.cateForm).then(res =>{
          if(res.code == 200){
            // console.log(res);
            this.$message.success("保存成功")
            this.cateOpen =false
            this.getList()
          }
        })
    },
    add(){
      this.cateOpen = true
    },
    handleClick(tab,event){
      this.getList()
      this.getList1()
          // console.log(this.options1);
          if(tab.index == 3){
              // console.log(123);
              this.form4= {
                  picUrl:'',
              }
          }
      },
      // 非付费代理分成比
      onSubmit(){
        getPriceUpdate(this.form5).then(res =>{
          if(res.code == 200){
            // console.log(res);
            this.$message.success("保存成功")
          }
        })
      },
    //   代理金额配置
    onSubmit1(){
      getPriceUpdate(this.form1).then(res =>{
          if(res.code == 200){
            // console.log(res);
            this.$message.success("保存成功")
          }
        })
    },
    //   代理分成配置
    onSubmit2(){
      
      // console.log(this.form2,this.priceForm);
      getPriceUpdate(this.priceForm).then(res =>{
          if(res.code == 200){
            // console.log(res);
            this.$message.success("保存成功")
            this.showDiv = false
            this.getList()
          }
        })
    },
    //   提现手续费
    onSubmit3(){
      getPriceUpdate(this.form3).then(res =>{
          if(res.code == 200){
            // console.log(res);
            this.$message.success("保存成功")
          }
        })
    },
    // 联系我们
    onSubmit4(){
      getMeasure(this.form4).then(res =>{
          if(res.code == 200){
            // console.log(res);
            this.$message.success("保存成功")
          }
        })
    },
    getList1(){
      if(this.listParams.type == 4){
          let data = {
            type:6
          }
        getMeasureDsc(data).then(res => {
          if(res.code == 200){
            this.form4 = res.data
            console.log(this.form4);
          }
        })
        }
    },
    // 获取详情
    getList(){
       if(this.listParams.type == 1){
          let data = {
            type:1
          }
        getPriceDsc(data).then(res => {
          if(res.code == 200){
            this.form1 = res.data[0]
          }
        })
        }
        else if(this.listParams.type == 2){
          let data = {
            type:2
          }, data1  = {
            type:3
          }
        getPriceDsc(data).then(res => {
          if(res.code == 200){
            this.form2 = res.data
            this.options1 = this.form2
          }
        })
        getPriceDsc(data1).then(res => {
          if(res.code == 200){
            this.form5 = res.data[0]
            // console.log(this.form5);
          }
        })
        }
        else if(this.listParams.type == 3){
          let data = {
            type:4
          }
        getPriceDsc(data).then(res => {
          if(res.code == 200){
            this.form3 = res.data[0]
          }
        })
        }
    },
    handleAvatarSuccess(res, file) {
      // console.log(URL.createObjectURL(file.raw));
      // this.form4.picUrl = res.data
       this.form4.picUrl ='https://9001rzsxy.oss-cn-beijing.aliyuncs.com'+ res.data
      // console.log(res.data);
        if(res.code ==200){
         this.$message.success("上传成功");
        }
    },
  },
  created () {
    this.getList()
    this.getList1()
  },
  mounted () {}
}
</script>

<style >
.configure{
    padding: 20px 20px 40px 20px;
  }
.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #ccc;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>
